<template>
  <BKModal
    v-model="visible"
    width="500"
    :show-zoom="false"
    :title="title"
    class="no-close"
  >
    <el-container>
      <el-header
        height="auto"
        class="m-t-s"
      >
        <el-steps
          :active="activeStep"
          align-center
          finish-status="success"
        >
          <el-step title="账号信息" />
          <el-step title="修改密码" />
          <el-step title="完成" />
        </el-steps>
      </el-header>
      <el-main>
        <div class="ta-c m-a-mini m-r-m">
          <template v-if="activeStep === 0">
            <div class="f-14 c-red f-w7 p-t-s">
              {{ tips }}
            </div>
            <div
              class="m-t-s ta-l m-b-s"
              style="margin-left: 74px;"
            >
              <div class="f-14 m-b-mini">
                登录账号
              </div>
              <el-input
                v-model="username"
                disabled
                style="width: 310px;"
              />
            </div>
          </template>
          <template v-else-if="activeStep === 1">
            <BKForm
              ref="form"
              :rules="passwordFormRules"
              :items="passwordFormItems"
              :has-reset="false"
              :has-submit="false"
            >
              <template #password>
                <BKPassword
                  ref="password"
                  v-model="password"
                />
              </template>
            </BKForm>
          </template>
          <template v-else-if="activeStep === 2">
            <i
              class="ri-shield-check-fill c-green"
              style="font-size: 64px;"
            />
            <div class="f-14 m-b-s">
              修改密码成功
            </div>
          </template>
        </div>
      </el-main>
      <el-footer height="auto">
        <div class="ta-r p-b-s b-t p-t-mini">
          <el-button
            type="primary"
            style="width: 140px;"
            @click="next"
          >
            {{ activeStep === 2 ? '重新登录' : '下一步' }}
          </el-button>
        </div>
      </el-footer>
    </el-container>
  </BKModal>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'PasswordPanel',
  data () {
    const validatePass = (rule, value, callback) => {
      if (this.password === '') {
        callback(new Error('请输入新密码'))
      } else if (!this.$refs.password.validate()) {
        callback(new Error('请按规则输入密码'))
      } else {
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.password) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
    return {
      visible: true,
      username: '',
      activeStep: 0,
      passwordFormRules: {
        oldPassword: [{ required: true, message: '请输入旧密码' }],
        newPassword: [{ validator: validatePass, trigger: 'blur' }],
        repeatPassword: [{ validator: validatePass2, trigger: 'blur' }]
      },
      passwordFormItems: [
        { type: 'input', label: '旧密码', field: 'oldPassword', props: { showPassword: true } },
        { label: '新密码', field: 'newPassword', slot: 'password' },
        { type: 'input', label: '确认密码', field: 'repeatPassword', props: { showPassword: true } }
      ],
      password: ''
    }
  },
  computed: {
    ...mapState('user', ['isInitialLogin', 'loginSettings']),
    title () {
      return this.isInitialLogin ? '初始密码修改' : '过期密码修改'
    },
    tips () {
      return this.isInitialLogin
        ? '您好，为了您的账号安全，请点击下一步修改密码'
        : `您好，当前密码已使用超过 ${this.loginSettings.PWD_DAY} 天，请点击下一步修改密码`
    }
  },
  methods: {
    ...mapActions('user', ['logout']),
    async next () {
      if (this.activeStep === 1) {
        const passed = await this.$refs.form.validate()
        if (!passed) return
        await this.$request.post('/user/updatePwd', {
          oldPassword: this.$refs.form.getFormData().oldPassword,
          newPassword: this.password
        })
      } else if (this.activeStep === 2) {
        this.logout()
        return
      }
      this.activeStep++
    }
  },
  created () {
    this.username = this.$store.state.user.userInfo.USER_NAME
  }
}
</script>
